<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
           <el-table-column type="selection" min-width="55" show-overflow-tooltip> </el-table-column>
           <el-table-column
            v-for="(item, index) in tableInfo"
            :prop="item.field_name_en"
            :label="item.field_name"
            :key="index"
            min-width="110"
            :width="
              [
                'input_percentage',
                'tag',
                'textarea',
                'date_picker',
                'date_time_picker',
                'cascader',
                'cascader_address'
              ].includes(item.form_value)
                ? 200
                : ''
            "
          >
            <template slot-scope="scope">
              <div v-if="item.form_value === 'textarea'">
                <div class="flex-center">{{ scope.row[item.field_name_en] }}</div>
              </div>
              <div v-else-if="item.form_value ==='radio'"  class="flex-center">
                   {{ scope.row[item.field_name_en].name }}
              </div> 
              <div v-else  class="flex-center">
                   {{ scope.row[item.field_name_en] }}
              </div> 
            </template>
          </el-table-column>

        </el-table>
    </div>
</template>
<script>

 export default {
    name: 'HelloWorld',
    data() {
        return {
            msg: 'Hello World'
        }
    },
    props: {
        tableData: {
            type: Array,
           default: () => {
                return []
            }
        },
        tableInfo: {
            type: Array,
            default: ()=> {
                return []
            }
        }
    },
    mounted(){
        console.log(this.tableData)
        console.log(this.tableInfo)
    },
 }

</script>
<style>


</style>